<template>
  <div class="individual">
    <div class="individual-content" v-show="listFlag">
      <div class="searchBox">
        <div class="searchBox-content">
          <img src="../../assets/img/search.png" alt="" @click="searchProj" />
          <input
            type="text"
            placeholder="项目名称或关键词"
            v-model="searchKey"
          />
        </div>
      </div>
      <div class="noResult" v-if="noResult">
        {{ noResult }}
      </div>
      <div class="contont">
        <div
          class="content-item"
          v-for="(item, index) in engineList"
          :key="index"
          @click="toDetail(item.PROJECTID)"
        >
          <span>{{ item.PROJECTNAME }}</span>
          <span></span>
        </div>
      </div>
    </div>
    <div class="individual-echarts" v-show="echartsFlag">
      <div class="echarts">
        <div class="echarts-title">
          <img src="../../assets/img/titile.png" alt="" />
          <span>前海控股项目评分</span>
        </div>
        <div class="echarts-contant" id="projectScore"></div>
      </div>
      <div class="echarts">
        <div class="echarts-title">
          <img src="../../assets/img/titile.png" alt="" />
          <span>新城办项目评分</span>
        </div>
        <div class="echarts-contant" id="newProjectScore"></div>
      </div>
      <div class="back" @click="backToList">返回列表</div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "individual",
  data() {
    return {
      engineList: [],
      searchKey: "",
      listFlag: true,
      echartsFlag: false,
      noResult: ""
    };
  },
  props: {
    title: {
      type: String,
      require: true
    }
  },
  created() {
    this.getProjList();
  },
  methods: {
    // 搜索单项统计
    searchProj() {
      // 按搜索名称查询
      this.getProjList(this.searchKey);
    },
    // 获取单项统计列表
    getProjList(key) {
      let params =
        '{"_method": "PMHSE_ECHARTS.selectSingleProject","projectName":"' +
        (key ? key : "") +
        '"}';
      this.$ajax({
        method: "post",
        url: this.COMMON_URL,
        data: { FixJSON: params },
        async: false
      }).then(res => {
        this.engineList = [];
        this.noResult = "";
        console.log("单项统计列表：", res);
        if (res.data.data.length > 0) {
          this.engineList = res.data.data;
        } else {
          this.noResult = "查询无结果";
        }
      });
    },
    // 初始化默认一年时间戳
    handleTimePoint() {
      let date = new Date();
      let end =
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1);
      let start =
        date.getFullYear() -
        1 +
        "-" +
        (date.getMonth() < 10 ? "0" + date.getMonth() : date.getMonth());
      return {
        startTime: start,
        endTime: end
      };
    },
    // 初始化坐标轴和空值
    initAxis() {
      let date = new Date();
      let X = [];
      let Y = date.getFullYear();
      let M = date.getMonth();
      for (var i = 0; i < 13; i++) {
        if (M < 10) {
          X.push(Y - 1 + "-0" + M);
          // M += 1;
        } else if (M >= 10 && M < 13) {
          X.push(Y - 1 + "-" + M);
          // M += 1;
        } else if (M >= 13 && M < 22) {
          X.push(Y + "-0" + (M - 12));
          // M += 1;
        } else if (M >= 22) {
          X.push(Y + "-" + (M - 12));
        }
        M += 1;
      }
      return X;
    },
    initValues(datas, basis) {
      console.log(basis instanceof Array);
      // 判断依据字段basis是否为数组，数组为新城办，不是数组为三个分项
      let X = this.initAxis();
      let values = [
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null
        ],
        values1 = [
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null
        ],
        values2 = [
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null
        ],
        values3 = [
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null
        ];

      if (basis instanceof Array) {
        for (var i = 0, len = values.length; i < len; i++) {
          datas.forEach(item => {
            if (item.CHECKMY == X[i]) {
              console.log(
                "111" + item[basis[0]],
                item[basis[1]],
                typeof item[basis[2]]
              );
              values1[i] = parseFloat(item[basis[0]]).toFixed(2);
              values2[i] = parseFloat(item[basis[1]]).toFixed(2);
              values3[i] = parseFloat(item[basis[2]]).toFixed(2);
            }
          });
        }
        return {
          values1,
          values2,
          values3
        };
      } else {
        for (var i = 0, len = values.length; i < len; i++) {
          datas.forEach(item => {
            if (item.CHECKMY == X[i]) {
              values[i] = parseFloat(item[basis]).toFixed(2);
            }
          });
        }
        return values;
      }
    },
    // 进入单项统计详情
    async toDetail(id) {
      console.log("项目id:", id);
      let ProjectScore = await this.getProjectScore(id);
      let SafetyScore = await this.getSafetyScore(id);
      let ProjectRank = await this.getProjectRank(id);
      let NewCityScore = await this.getNewCityScore(id);
      console.log("ProjectScore", ProjectScore);
      console.log("SafetyScore", SafetyScore);
      console.log("ProjectRank", ProjectRank);
      console.log("NewCityScore", NewCityScore);
      let ProjectScoreValue = this.initValues(
        ProjectScore.data.list,
        "MONTHSCORE"
      );
      let SafetyScoreValue = this.initValues(SafetyScore.data.list, "NUM");
      let ProjectRankValue = this.initValues(ProjectRank.data.list, "NUM");
      let NewCityScoreValues = this.initValues(NewCityScore.data.list, [
        "SCORE",
        "SAFETYINDEX",
        "RANK"
      ]);
      console.log("ProjectScoreValue", ProjectScoreValue);
      console.log("SafetyScoreValue", SafetyScoreValue);
      console.log("ProjectRankValue", ProjectRankValue);
      console.log("NewCityScoreValue", NewCityScoreValues);
      let X = this.initAxis();
      this.projectScoreInit(
        X,
        ProjectScoreValue,
        SafetyScoreValue,
        ProjectRankValue,
        NewCityScoreValues
      );
      this.listFlag = false;
      this.echartsFlag = true;
    },
    // 返回列表
    backToList() {
      this.listFlag = true;
      this.echartsFlag = false;
    },
    // // 前海控股项目评分分三部分获取数据
    // 项目评分
    getProjectScore(id) {
      let timePont = this.handleTimePoint();
      let params =
        '{"_method": "PMHSE_ONEPRJTABLE.selectScoreTrend","startTime":"' +
        timePont.startTime +
        '","endTime":"' +
        timePont.endTime +
        '","proId":"' +
        id +
        '"}';
      console.log(params);
      return this.$ajax({
        method: "post",
        url: this.COMMON_URL,
        data: { FixJSON: params },
        async: false
      });
    },
    // 安全指数评分
    getSafetyScore(id) {
      let timePont = this.handleTimePoint();
      let params =
        '{"_method": "PMHSE_ECHARTS.selectAvgScore","startTime":"' +
        timePont.startTime +
        '","endTime":"' +
        timePont.endTime +
        '","proId":"0"}';
      return this.$ajax({
        method: "post",
        url: this.COMMON_URL,
        data: { FixJSON: params },
        async: false
      });
    },
    // 项目排名
    getProjectRank(id) {
      let timePont = this.handleTimePoint();
      let params =
        '{"_method": "PMHSE_ONEPRJTABLE.selectTotalRank","startTime":"' +
        timePont.startTime +
        '","endTime":"' +
        timePont.endTime +
        '","proId":"' +
        id +
        '"}';
      return this.$ajax({
        method: "post",
        url: this.COMMON_URL,
        data: { FixJSON: params },
        async: false
      });
    },
    // //新城办项目评分
    getNewCityScore(id) {
      let timePont = this.handleTimePoint();
      let params =
        '{"_method": "PMHSE_ONEPRJTABLE.selectPrjNameNew","startTime":"' +
        timePont.startTime +
        '","endTime":"' +
        timePont.endTime +
        '","proId":"' +
        id +
        '"}';
      return this.$ajax({
        method: "post",
        url: this.COMMON_URL,
        data: { FixJSON: params },
        async: false
      });
    },
    projectScoreInit(X, A, B, C, D) {
      var projectScore = echarts.init(document.getElementById("projectScore"));
      var newProjectScore = echarts.init(
        document.getElementById("newProjectScore")
      );
      var option1 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          itemWidth: 10, // 设置宽度
          itemHeight: 10,
          padding: [20, 10, 0, 20],
          x: "left",
          itemGap: 20,
          data: [
            {
              name: "项目评分",
              icon: "emptycircle"
            },
            {
              name: "前海控股安全指数",
              icon: "emptycircle"
            },
            {
              name: "项目排名",
              icon: "emptycircle"
            }
          ]
        },
        xAxis: {
          type: "category",
          data: X,
          axisTick: {
            show: true //不显示坐标轴刻度线
          },
          axisLine: {
            lineStyle: {
              color: "#f4f4f4"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#999999", //这里用参数代替了
              fontSize: 8
            },
            rotate: 45
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false //不显示坐标轴刻度线
          },
          axisLine: {
            show: false //不显示坐标轴线
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#F4F4F4"],
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#999999" //这里用参数代替了
            }
          },
          minInterval: 20
        },
        series: [
          {
            name: "项目评分",
            data: A,
            type: "line",
            symbolSize: 6,
            itemStyle: {
              color: "#6495FA",
              borderColor: "#6495FA"
            },
            connectNulls: true
          },
          {
            name: "前海控股安全指数",
            data: B,
            type: "line",
            symbolSize: 6,
            itemStyle: {
              color: "#6BDCAF",
              borderColor: "#6BDCAF"
            },
            connectNulls: true
          },
          {
            name: "项目排名",
            data: C,
            type: "line",
            areaStyle: {
              opacity: 0.2
            },
            symbolSize: 6,
            itemStyle: {
              color: "#F8C42D",
              borderColor: "#F8C42D"
            },
            connectNulls: true
          }
        ]
      };
      var option2 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          itemWidth: 10, // 设置宽度
          itemHeight: 10,
          padding: [20, 10, 0, 20],
          x: "left",
          itemGap: 20,
          data: [
            {
              name: "项目评分",
              icon: "emptycircle"
            },
            {
              name: "前海安全指数",
              icon: "emptycircle"
            },
            {
              name: "项目排名",
              icon: "emptycircle"
            }
          ]
        },
        xAxis: {
          type: "category",
          data: X,
          axisTick: {
            show: true //不显示坐标轴刻度线
          },
          axisLine: {
            lineStyle: {
              color: "#f4f4f4"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#999999", //这里用参数代替了
              fontSize: 8
            },
            rotate: 45
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false //不显示坐标轴刻度线
          },
          axisLine: {
            show: false //不显示坐标轴线
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#F4F4F4"],
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#999999" //这里用参数代替了
            }
          },
          minInterval: 20
        },
        series: [
          {
            name: "项目评分",
            data: D.values1,
            type: "line",
            symbolSize: 6,
            itemStyle: {
              color: "#6495FA",
              borderColor: "#6495FA"
            },
            connectNulls: true
          },
          {
            name: "前海安全指数",
            data: D.values2,
            type: "line",
            symbolSize: 6,
            itemStyle: {
              color: "#6BDCAF",
              borderColor: "#6BDCAF"
            },
            connectNulls: true
          },
          {
            name: "项目排名",
            data: D.values3,
            type: "line",
            areaStyle: {
              opacity: 0.2
            },
            symbolSize: 6,
            itemStyle: {
              color: "#F8C42D",
              borderColor: "#F8C42D"
            },
            connectNulls: true
          }
        ]
      };
      projectScore.setOption(option1);
      newProjectScore.setOption(option2);
    }
  }
};
</script>
<style lang="less" scoped>
.echarts {
  margin-top: 8px;
  width: 100%;
  height: 273px;
  background: #fff;
  position: relative;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    line-height: 1;
    padding-top: 14px;
    position: relative;
    img {
      width: 18px;
      height: 13px;
      margin-left: 15px;
      margin-top: 2px;
    }
    span {
      font-size: 16px;
      font-family: PingFang SC Semibold, PingFang SC Semibold-Semibold;
      font-weight: 600;
      color: #262a34;
      margin-left: 5px;
    }
    .selectTimeIcon {
      width: 24px;
      height: 24px;
      position: absolute;
      right: 18px;
    }
  }
}
#newProjectScore,
#projectScore {
  width: 400px;
  height: 250px;
  position: absolute;
  top: 40px;
}
// 返回列表按钮样式
.back {
  width: 130px;
  height: 40px;
  border-radius: 8px;
  background: #4d86ff;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
  margin: 20px auto;
}
.searchBox {
  margin-top: 8px;
  height: 48px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  &-content {
    width: 345px;
    height: 36px;
    background: #f5f5f5;
    border-radius: 2px;
    display: flex;
    align-items: center;
    // span:nth-child(1) {
    //   margin-left: 11px;
    //   font-size: 15px;
    //   font-family: PingFang SC Regular, PingFang SC Regular-Regular;
    //   font-weight: 400;
    //   color: #262a34;
    // }
    // span:nth-child(2) {
    //   width: 0;
    //   height: 0;
    //   display: block;
    //   border: 5px solid;
    //   border-color: #999 transparent transparent;
    //   margin-left: 23px;
    //   margin-top: 5px;
    // }
    img {
      display: block;
      width: 15px;
      height: 15px;
      margin-left: 12px;
    }
    input {
      border: none;
      outline: none;
      font-size: 15px;
      font-family: PingFang SC Regular, PingFang SC Regular-Regular;
      font-weight: 400;
      background: #f5f5f5;
      margin-left: 10px;
      width: 250px;
    }
    input::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #ccc;
    }
  }
}
.content {
  &-item {
    height: 60px;
    background: #fff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    position: relative;
    span:nth-child(1) {
      margin-left: 14px;
      font-size: 15px;
      font-family: PingFang SC Regular, PingFang SC Regular-Regular;
      font-weight: 400;
      color: #191919;
      width: 300px;
    }
    span:nth-child(2) {
      display: block;
      width: 6px;
      height: 6px;
      border-top: 1px solid #cccccc;
      border-right: 1px solid #cccccc;
      transform: rotate(45deg);
      position: absolute;
      right: 17px;
    }
  }
}
// 无结果样式
.noResult {
  background: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  height: 300px;
  line-height: 300px;
}
</style>
